let bImg = document.querySelector(".bigBox img");
function SmallToBig() {
    this.mBox = document.querySelector(".middleBox");
  
    this.mSpan = document.querySelector(".middleBox span");
    this.bBox = document.querySelector(".bigBox");
    
    // this.imgs = document.querySelectorAll(".listImg img");
    this.listimg = document.querySelector(".bigBox img");
    this.index = 0;
    ajax("http://localhost:3000/getGoods", (res) => {
        this.res = JSON.parse(res).data;
        this.addEvent();
    })
}
SmallToBig.prototype.addEvent = function () {
    const that = this;
    this.mBox.addEventListener("mouseover", function () {
        that.show()
    })
    this.mBox.addEventListener("mouseout", function () {
        that.hide()
    })
    this.mBox.addEventListener("mousemove", function () {
        that.move()
    })




    // console.log(this.imgs);
    // this.imgs.forEach((val, idx) => {
    //     val.onmouseover = function () {
    //         that.imgs[that.index].className = "";
    //         this.className = "active";
    //         that.bImg.src = that.imgArr[idx].large;
    //         that.mImg.src = that.imgArr[idx].middle;
    //         that.index = idx;
    //     }
    // })
}



SmallToBig.prototype.show = function () {
    this.mSpan.style.display = "block";
    this.bBox.style.display = "block";
    this.getSize();
    this.mSpan.style.width = this.bBoxW / this.bImgW * this.mBoxW + "px";
    this.mSpan.style.height = this.bBoxH / this.bImgH * this.mBoxH + "px";
}
SmallToBig.prototype.getSize = function () {
    this.bBoxW = this.bBox.offsetWidth;
    this.bBoxH = this.bBox.offsetHeight;
    this.bImgW = bImg.offsetWidth;
    this.bImgH = bImg.offsetHeight;
    this.mBoxW = this.mBox.offsetWidth;
    this.mBoxH = this.mBox.offsetHeight;
}
SmallToBig.prototype.hide = function () {
    this.mSpan.style.display = "none";
    this.bBox.style.display = "none";
}
SmallToBig.prototype.move = function (eve) {
    const e = eve || window.event;
    let l = e.offsetX - this.mSpan.offsetWidth / 2;
    let t = e.offsetY - this.mSpan.offsetHeight / 2;
    if (l < 0) l = 0;
    if (t < 0) t = 0;
    if (l > this.mBoxW - this.mSpan.offsetWidth) {
        l = this.mBoxW - this.mSpan.offsetWidth;
    }
    if (t > this.mBoxH - this.mSpan.offsetHeight) {
        t = this.mBoxH - this.mSpan.offsetHeight;
    }
    this.mSpan.style.left = l + "px";
    this.mSpan.style.top = t + "px";
    const x = l / (this.mBoxW - this.mSpan.offsetWidth);
    const y = t / (this.mBoxH - this.mSpan.offsetHeight);
    bImg.style.left = - x * (this.bImgW - this.bBoxW) + "px";
    bImg.style.top = - y * (this.bImgH - this.bBoxH) + "px";
}
new SmallToBig();


// 点击展开菜单


let bx = document.querySelector("section .product-down .p-left .shop-kind .shop-all>.topone");
let boxes = document.querySelectorAll("section .product-down .p-left .shop-kind .shop-all>.otherone");
let list = document.querySelector("section .product-down .p-left .shop-kind .shop-all>.list-row");
let flag = 0;
let i = document.querySelectorAll("section .product-down .p-left .shop-kind .shop-all>.list-col");
bx.onclick = function () {
    if (flag === 0) {
        list.style.display = "block";
        bx.className = "iconfont icon-xiajiantou";
        flag = 1;
    } else if (flag === 1) {
        list.style.display = "none";
        bx.className = "iconfont icon-arrow_right_fat";
        flag = 0;
    };
};
let sign = [0, 0, 0, 0]
for (let j = 0; j < boxes.length; j++) {
    boxes[j].onclick = function () {
        if (sign[j] === 0) {
            i[j].style.display = "block";
            boxes[j].className = "iconfont icon-xiajiantou";
            sign[j] = 1;
        } else if (sign[j] === 1) {
            i[j].style.display = "none";
            boxes[j].className = "iconfont icon-arrow_right_fat";
            sign[j] = 0;
        };
    };
};


// 选项卡


function Tab() {
    this.btns = document.querySelectorAll(".p-right .card p")
    this.conts = document.querySelectorAll(".p-right .cont>div");
    this.index = 0;
    this.setEvent();
    this.setIndex();
    this.setDefault();
}
Tab.prototype.setEvent = function () {
    const that = this;
    for (let i = 0; i < this.btns.length; i++) {
        this.btns[i].onclick = function () {
            that.btns[that.index].className = "";
            that.conts[that.index].style.display = "none";
            that.btns[this.index].className = "active";
            that.conts[this.index].style.display = "block";
            that.index = this.index;
        }
    }
}
Tab.prototype.setIndex = function () {
    this.btns.forEach((val, idx) => {
        val.index = idx;
    })
}
Tab.prototype.setDefault = function () {
    this.btns[this.index].className = "active";
    this.conts[this.index].style.display = "block";
}
new Tab();


// 二维码


let fhz = document.querySelector(".card i");
let jt = document.querySelector(".card i .jt");
let ewm = document.querySelector(".card i img");
fhz.onmouseover = function () {
    ewm.style.display = "block";
    ewm.style.position = "absolute";
    ewm.style.top = "40px";
    ewm.style.right = "0";
    jt.className = "iconfont icon-xiangshang";
}
fhz.onmouseleave = function () {
    ewm.style.display = "none";
    jt.className = "iconfont icon-xiangxia";
};
// 回顶部
let goTop = document.getElementsByClassName('GT')[0];
window.onscroll = function () {
    let ref = document.body.scrollTop || document.documentElement.scrollTop;
    if (ref > 400) {
        goTop.style.display = 'block';
    } else {
        goTop.style.display = 'none';
    }
}
goTop.onclick = function () {
    let p = document.documentElement.scrollTop;
    let time;
    clearInterval(time);
    time = setInterval(() => {
        let speed = (document.documentElement.scrollTop) / 40;
        if (p !== document.documentElement.scrollTop) {
            clearInterval(time);
        }
        document.documentElement.scrollTop -= speed;
        p = document.documentElement.scrollTop;
        if (document.documentElement.scrollTop === 0) {
            clearInterval(time);
        }
    }, 0);
}
const id = location.search.split("?")[1];

class Page {
    constructor(ops) {
        this.img_001 = ops.img_001;
        this.price = ops.price;
        this.info = ops.info;
        this.load();
    }
    load() {
        ajax("http://localhost:3000/getGoods?" + id, (res) => {
            this.res = JSON.parse(res).data;
            console.log(this.res);
            this.rander();
            res = JSON.parse(res).data;
            $(".bigBox img").src = this.res[id - 1].img_001;
            $(".middleBox img").src = this.res[id - 1].img_001;
            $(".tit").innerHTML = this.res[id - 1].info;
            // $(".emm").innerHTML = this.res[id].price;
        })
    }
    rander() {
        const lft = document.querySelector(".left_");
        let tit = document.querySelector(".top-title");
        const products = document.querySelector(".products");
        const listImg = document.querySelector(".listImg");
        const in_info = document.querySelector(".in-info");
        let price_up = document.querySelector(".price-up");
        const mini_img = document.querySelector(".mini-img");
        let str_mini_img = "";
        let abc = document.querySelector(".data-info");
        let a1 = document.querySelector(".a1");
        let str = "";
        let str_price_up = "";
        let str_listImg = "";
        let str_info = "";
        let ooo = abc.innerHTML;
        abc.innerHTML = ooo;
        
        // for (let i = 0; i < 1; i++) {
        //     str_mini_img = `
        //     <img class="active" src="${this.res[i].img_002}" alt="">
        //                     <img src="${this.res[i].img_003}" alt="">
        //                     <img src="${this.res[i].img_004}" alt="">
        //                     <img src="${this.res[i].img_005}" alt="">`
        // }
        for (let i = 0; i < 20; i++) {
            str += `<div>
                            <a href="http://localhost:3000/info.html?${this.res[i].Id-0}">
                            <img src="${this.res[i].img_001}" alt="">
                            <p>${this.res[i].info}</p></a>
                            <span>¥ <strong>${this.res[i].price}</strong></span>
                        </div>`
            a1.src = this.res[i].img_001;
        }
        const cur = this.res.findIndex(i=>i.Id-0==id);
        console.log(cur);
        str_listImg = `
                            <img class="active" src="${this.res[cur].img_001}" alt="">
                            <img src="${this.res[cur].img_002}" alt="">
                            <img src="${this.res[cur].img_003}" alt="">
                            <img src="${this.res[cur].img_004}" alt="">
                            <img src="${this.res[cur].img_005}" alt="">`
                            setTimeout(() => {
                                    swith_img();
                            }, 1);
        for (let i = 0; i < 2; i++) {
            str_info += `  <div>
                                <p>￥${this.res[i].price}</p>
                                <img src="${this.res[i].img_001}" alt="">
                            </div>`
        }
        

        ooo = `         <div>规格参数</div>
                            <b>基本参数</b>
                            <p>
                            <span>种类</span>
                            <span class="cs1">${this.res[id - 1].kind}</span>
                        </p>
                        <p>
                            <span>名称</span>
                            <span class="cs2">${this.res[id - 1].name}</span>
                        </p>
                        <p>
                            <span>颜色</span>
                            <span class="cs3">${this.res[id - 1].Color}</span>
                        </p>
                        <p>
                            <span>CPU</span>
                            <span class="cs4">${this.res[id - 1].CPU}</span>
                        </p>
                        <p>
                            <span>核心数</span>
                            <span class="cs5">${this.res[id - 0].CPU_number}</span>
                        </p>
                            ` + ooo
                            
                        //如需使用，放到上方反引号内

        // str_tit = tit.innerHTML;
        
        tit.innerHTML = `<h3 class="tit">${this.res[id - 1].info}</h3>`;

        str_price_up = `
        <span>价格</span>
        <em class="emm">￥${this.res[id - 1].price}</em>
        <div>
                <strong>5000+</strong>
                <span>月销量</span>
        </div> `
            
        // for(let i in this.res){
        //     console.log(this.res[i].img_001);
        //     a1.src = this.res[i].img_001;
        // }
        abc.innerHTML = ooo;
        products.innerHTML = str;
        lft.innerHTML = str;
        listImg.innerHTML = str_listImg;
        in_info.innerHTML = str_info;
        price_up.innerHTML = str_price_up;
        // mini_img.innerHTML = str_mini_img;
    }
    
}

function swith_img() {
    let swith_imgs = document.querySelectorAll(".listImg img");
    let mImg = document.querySelector(".middleBox img");
    
    console.log(swith_imgs);
    swith_imgs.forEach((val, idx) => {
        val.onmouseover = function () {
            swith_imgs.forEach(cle => cle.className='');
            this.className = "active";
            bImg.src = val.src;
            mImg.src = val.src;
            this.index = idx;
        }
        val.onmouseout = function () {
            val.className = "";
        }
    })

}

new Page({
    kind: $(".cs1"),
    name: $(".cs2"),
    // name: $(".tit"),
    Color: $(".cs3"),
    CPU: $(".cs4"),
    CPU_number: $(".cs5"),
    price: $(".emm"),
    info: $(".tit"),
    img_001: $(".listImg img"),
    info: $(".products p>a"),
    price: $(".products strong"),
})



function $(select) {
    return document.querySelector(select);
}

// 增减数量

let mines = document.querySelector(".c-devide");
let add = document.querySelector(".c-add");
let text = document.querySelector(".text");
mines.onclick = function () {
    console.log(add);
    if (text.value == 0) {
        text.value = 0
    } else { text.value-- }
};
add.onclick = function () {
    text.value++
};

// 点击加边框
let big_memory = document.querySelectorAll(".memory-change div")
for (let i = 0; i < 3; i++) {
    big_memory[i].onclick = function () {
        for (let j = 0; j < 3; j++) { big_memory[j].id = '' }
        big_memory[i].id = "actives";
    }
}

// let mini_imgs  = document.querySelectorAll(".mini-img img")
// for(let i = 0; i<4;i++){
//     mini_imgs[i].onclick = function(){
//         for(let j = 0; j<4;j++){mini_imgs[j].id = ''}
//         mini_imgs[i].id = "actives";
//     }
// }
// console.log(mini_imgs);

